<template>
  <div>
    <h1>computed函数</h1>
    <ul>
      <li v-for="(item, i) in list" :key="item" @click="add(i)">{{ item }}</li>
    </ul>
    <p>
      <button @click="add">新增</button>
    </p>
    <h3>{{ countExcue }}</h3>
  </div>
</template>

<script>
/**
 * **使用步骤**
1. 从vue框架中导入`computed` 函数
2. 在setup函数中执行computed函数，并传入一个函数，在函数中定义计算公式
写法：const 计算属性变量名 = computed(()=>{return 返回计算结果})
3. 把computed函数调用完的执行结果放到setup的return值对象中
 */
import { ref, computed } from 'vue'
export default {
  setup () {
    // 列表变量
    const list = ref([2, 3, 4])
    // 需求获取列表中大于3的值渲染
    const thirdList = computed(() => {
      return list.value.filter(item => item > 3)
    })
    // 方法
    // 新增
    const add = () => {
      list.value.push(Math.random() * 1000 + 1)
    }
    // 删除
    const del = (i) => {
      list.value.push(i, 1)
    }
    // 另外一个
    const count = ref(0)
    const countExcue = computed(() => {
      return count.value + 10
    })
    return { list, add, del, thirdList, countExcue, count }
  }
}
</script>

<style lang="scss" scoped>
</style>
